<template>
  <el-container class="home-container">
    <!-- 侧边栏区域 -->
    <el-aside width="201px">
      <v-aside></v-aside>
    </el-aside>
    <!-- 内容区域 -->
    <el-container>
      <!-- 头部区域 -->
      <el-header>
        <v-head></v-head>
      </el-header>
      <!-- 主体区域 -->
      <el-main>
        <!-- 用于保留组件状态或避免重新渲染 -->
        <keep-alive>
          <!-- 路由占位符 -->
          <router-view></router-view>
        </keep-alive>
      </el-main> 
    </el-container>
  </el-container>
</template>
<script>
import vAside from './Aside.vue'
import vHead from './Header.vue'
export default {
  components: {
    vAside,
    vHead
  }
}
</script>

<style lang="less" scoped>
.home-container {
  height: 100%;
}
.el-header{
  padding: 0px;
}
</style>
